<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			form{margin: 0 auto;width:490px;}
			.bigbox{width:490px;height:535px;border: 1px solid #c6c8c7;}
			.box1,.box2{border: 1px solid #c6c8c7;font-size: 12px;}
			legend{border: 1px solid #c6c8c7;padding: 4px 20px;}
			.a{margin-left:95px;margin-right: 8px;}
			.b{margin-left:107px;margin-right: 8px;}
			.a,.b,input[type="text"],input[type="password"]{margin-bottom: 8px;}
			input[type="text"],input[type="password"]{width:116px;height:18px;border: 1px solid #c6c8c7;}
			input[type="checkbox"]{margin-left:78px;margin-right:8px;}
			.box1 [type=checkbox]:after{content: "";display:block;width: 12px;height: 12px;border:1px solid #587176;background-color: #d0f0fd;
                   }
            .box1 input[type=checkbox]:checked:after{content: '\2713';background-color: #5774FF;
                   }
			input[type="submit"],input[type="reset"]{margin-left:5px;width:62px;height:20px;border:1px solid #587176;background:#d0f0fd;}
			.box1 div{margin-top: 11px;color:#4c7b83;}
			legend{color:#4c7b83;font-weight: 600;}
			label{color: #626262;}
			.box2  p{color:#4c7b83;}
			a{text-decoration:none;color:#4b859b;}
			h3{line-height: 20px;font-size: 14px;}
			.box2 div{font-size: 12px;color:#4c7b83;font-weight: 600;margin-top: 8px;}
		</style>
	</head>
	<body>
		<form action="" method="post">
			<fieldset class="bigbox">
				
			  <h3>已注册用户登录</h3>
				<fieldset class="box1">
					<legend>用户登录</legend>
					<label for="name" class="a">用户名</label><input type="text"  id="name" /><br />
					<label for="password" class="b">密码</label><input type="text"  id="password" /><br />
				  <input type="checkbox" /><span style="font-size: 12px;text-decoration:underline;">记住我</span><input type="submit" value="登录"/>
				  <div>您忘记密码？</div>
				
				</fieldset>
				
			 <h3>未注册创建账户</h3> 
				 <fieldset class="box2">
					<legend>用户注册</legend>
					<p><b>您的电子邮箱不会被公布出去，但是必须填写。</b>在你注册之前请认真阅读服务条款</p>
					<label for="name" class="a">用户名</label><input type="text"  id="name" />*(最多30个字符)<br />
					<label  class="a" style="margin-left: 83px;">电子邮箱</label><input type="text"  id="name" />*<br />
					<label for="password" class="b">密码</label><input type="text"  id="password" style="width:91px;"/>*(最多15个字符)<br />
					<label  class="a" style="margin-left: 83px;">重复密码</label><input type="text" style="width:91px;"/>*<br />
					<label style="margin-left: 59px;">同意服务条款</label><input type="checkbox" style="margin-left: 13px;"/>
					<a href="">先看看条款？ </a>*<br />
				    <input type="submit" style="margin-left: 122px;margin-top:6px;"/><input type="reset" />
				    <div>*在提交您的注册信息时，我们认为您已经同意了我们的服务条款。<br />
				    *这些条款可能在您未经同意的时候进行修稿}	</div>		
				 </fieldset>
			</fieldset>
		</form>
	</body>
</html>
